﻿@{
    ViewBag.Title = "CheckOut";
}

@section scripts{
    <!-- The required Stripe lib -->
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

    <!-- jQuery is used only for this example; it isn't required to use Stripe -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $('#customButton').on('click', function (e) {
            if ($("#txtAmount").val().trim() == "") {
                alert("Amount cannot be empty");
                txtAmount.focus();
                return;
            }
            if (!$.isNumeric($("#txtAmount").val())) {
                alert("Amount must be numeric");
                txtAmount.focus();
                return;
            }
            if ($("#txtExtraInfo").val().trim() == "") {
                alert("Extra Transaction Info cannot be empty");
                txtTransaction.focus();
                return;
            }
        });
    </script>
    <script type="text/javascript">
        // This identifies your website in the createToken call below
        Stripe.setPublishableKey('pk_test_Ftq7urpNvNsWGG9swLfrRoUq');
        var stripeResponseHandler = function (status, response) {
            var $form = $('#payment-form');
            if (response.error) {
                // Show the errors on the form
                $form.find('.payment-errors').text(response.error.message);
                $form.find('button').prop('disabled', false);
            } else {
                // token contains id, last4, and card type
                var token = response.id;
                // Insert the token into the form so it gets submitted to the server
                $form.append($('<input type="hidden" name="stripeToken" />').val(token));
                // and re-submit
                $form.get(0).submit();
                var userid = $("#txtUserId").val();
                var extrainfo = $("#txtExtraInfo").val();
                var amount = $("#txtAmount").val();
                window.location.href = "@Url.Action("HandleData", "Charge")" + "?token=" +
                    token + "&userid=" + userid + "&extrainfo=" + extrainfo + "&amount=" + amount;
            }
        };
        jQuery(function ($) {
            $('#payment-form').submit(function (e) {
                var $form = $(this);
                // Disable the submit button to prevent repeated clicks
                $form.find('button').prop('disabled', true);
                Stripe.card.createToken($form, stripeResponseHandler);
                // Prevent the form from submitting with the default action
                return false;
            });
        });

    </script>
}
<h2>@ViewBag.Message</h2>
<form action="" method="POST" id="payment-form">

    <div class="form-row">
        <label>
            <span>Card Number</span>
            <input type="text" size="20" data-stripe="number" />
        </label>
    </div>

    <div class="form-row">
        <label>
            <span>CVC</span>
            <input type="text" size="4" data-stripe="cvc" />
        </label>
    </div>

    <div class="form-row">
        <label>
            <span>Amount</span>
            <input type="text" size="20" id="txtAmount" />
        </label>
    </div>

    <div class="form-row">
        <label>
            <span>ExtraTransaction Info</span>
            <input type="text" size="20" id="txtExtraInfo" />
        </label>
    </div>

    <div class="form-row">
        <label>
            <span>Expiration (MM/YYYY)</span>
            <input type="text" size="2" data-stripe="exp-month" />
        </label>
        <span> / </span>
        <input type="text" size="4" data-stripe="exp-year" />
    </div>

    <button type="submit" id="customButton">Submit Payment</button>
</form>